<template>
	<div class="table-box">
		<ProTable ref="proTable" :columns="columns" :requestApi="getRoleList" :initParam="initParam" :dataCallback="dataCallback">
			<!-- 表格 header 按钮 -->
			<template #tableHeader>
				<el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')" v-if="BUTTONS.add">新增角色</el-button>
			</template>
			<!-- Expand -->
			<template #expand="scope">
				{{ scope.row }}
			</template>
			<!-- 角色状态 slot -->
			<template #status="scope">
				<!-- 如果插槽的值为 el-switch，第一次加载会默认触发 switch 的 @change 方法，所有在外层包一个盒子，点击触发盒子 click 方法（暂时只能这样解决） -->
				<div @click="changeStatus(scope.row)" v-if="BUTTONS.status">
					<el-switch
						:value="scope.row.status"
						:active-text="scope.row.status === '0' ? '启用' : '禁用'"
						active-value="0"
						inactive-value="1"
					/>
				</div>
				<el-tag :type="scope.row.status === '0' ? 'success' : 'danger'" v-else>
					{{ scope.row.status === "0" ? "启用" : "禁用" }}
				</el-tag>
			</template>
			<!-- 表格操作 -->
			<template #operation="scope">
				<el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
				<el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
			</template>
		</ProTable>
		<UserDrawer ref="drawerRef"></UserDrawer>
		<ImportExcel ref="dialogRef"></ImportExcel>
	</div>
</template>

<script setup lang="tsx" name="systemRole">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { Role } from "@/api/interface";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import UserDrawer from "@/views/proTable/components/UserDrawer.vue";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { getRoleList, deleteRole, editRole, addRole, changeRoleStatus } from "@/api/modules/role";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	type: 1
});

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
	return {
		datalist: data.list,
		total: data.total,
		pageNum: data.pageNum,
		pageSize: data.pageSize
	};
};

// 页面按钮权限
const { BUTTONS } = useAuthButtons();

// 自定义渲染头部(使用tsx语法)
const renderHeader = (scope: any) => {
	return (
		<el-button
			type="primary"
			onClick={() => {
				ElMessage.success("我是自定义表头");
			}}
		>
			{scope.row.label}
		</el-button>
	);
};

// 表格配置项
const columns: Partial<ColumnProps>[] = [
	{ type: "selection", width: 80, fixed: "left" },
	{ prop: "roleName", label: "角色名称", width: 130, search: true },
	{ prop: "roleKey", label: "角色标识", search: true },
	{
		prop: "status",
		label: "角色状态",
		sortable: true,
		search: true,
		searchType: "select",
		enum: [
			{ label: "启用", value: 0 },
			{ label: "禁用", value: 1 }
		],
		searchProps: { label: "roleLabel", value: "roleStatus" }
	},
	{
		prop: "createTime",
		label: "创建时间",
		width: 200,
		sortable: true,
		search: true,
		searchType: "datetimerange",
		searchProps: {
			disabledDate: (time: Date) => time.getTime() < Date.now() - 8.64e7
		},
		searchInitParam: ["2022-08-30 00:00:00", "2022-08-20 23:59:59"]
	},
	{ prop: "operation", label: "操作", width: 330, fixed: "right", renderHeader }
];

// 删除角色信息
const deleteAccount = async (params: Role.ResRoleList) => {
	await useHandleData(deleteRole, { id: [params.id] }, `删除【${params.roleName}】角色`);
	proTable.value.refresh();
};

// 切换角色状态
const changeStatus = async (row: Role.ResRoleList) => {
	await useHandleData(changeRoleStatus, { id: row.id, status: row.status == 1 ? 0 : 1 }, `切换【${row.roleName}】角色状态`);
	proTable.value.refresh();
};

const dialogRef = ref();

// 打开 drawer(新增、查看、编辑)
interface DrawerExpose {
	acceptParams: (params: any) => void;
}
const drawerRef = ref<DrawerExpose>();
const openDrawer = (title: string, rowData: Partial<Role.ResRoleList> = { roleName: "" }) => {
	let params = {
		title,
		rowData: { ...rowData },
		isView: title === "查看",
		apiUrl: title === "新增" ? addRole : title === "编辑" ? editRole : "",
		getTableList: proTable.value.refresh
	};
	drawerRef.value!.acceptParams(params);
};
</script>
